<template>
  <div class="patrolTable-root">
    <formTitleVue
      title="报警区域分布"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <div class="select-ul">
      <el-cascader v-model="nowCascader" :options="cascader_options" @change="changeCascader"></el-cascader>
    </div>
    
    <myLine domId="overview-earlyWarningTrend-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import gdAreaSelectVue from "@/components/GdAreaSelect/GdAreaSelect.vue";
import { api_alarmCityVersionFoldLine,api_cascader } from '@/api/jcfx/jcsjtj.js'
import myLine from '@/components/Echarts/myLine.vue';
import { time_select_optios } from '@/utils/global.js';

export default {
  name: "patrolTable",
  components: {
    formTitleVue,gdAreaSelectVue,myLine,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "本日",
          options:[
            { label: "本日", value: "本日" },
            { label: "本月", value: "本月" },
            { label: "本季度", value: "本季度" },
            { label: "本年", value: "本年" },
          ]
        }
      ],
      searchForm: {
        startTime: '',
        endTime: '',
        bModeType: '',
        modeType: '',
        areaCode: this.$store.state.account.user.deptIds,
        placeType: '03', // 区域统计维度 02：市 03：区 04：县（东莞，中山传04，其他03）
      },
      cascader_options: [],
      chartsData: {
        xData: [],
        yData: [],
      },
      echartsOption:{
        legend:{
          top: "2%"
        }
      },
      nowCascader: [''],
    };
  },
  methods: {
    selectChange(item) {
      let time_select = time_select_optios[item]||{}
      this.searchForm.startTime = time_select.startTime||''
      this.searchForm.endTime = time_select.endTime||''
      this.getData()
    },
    getData(){
      api_alarmCityVersionFoldLine(this.searchForm).then(res => {
        if(res.code==200){
          let data = res.data
          this.chartsData.xData= data.xAxle

          let yData = []
          data.data.map(item => {
            let key = Object.keys(item)[0]
            let obj = {
              name: key,
              data: item[key]
            }
            yData.push(obj)
          })
          this.chartsData.yData= yData
        }
      })
    },
    // 获取级联数据下拉框
    async getCascader(){
      await api_cascader({type:'twoType'}).then(res => {
        // console.log(res)
        this.cascader_options = res.data
        return Promise.resolve()
      })
    },
    // 级联选择
    changeCascader(val){
      // console.log(val)
      this.searchForm.bModeType = val[0]||''
      this.searchForm.modeType = val[1]||''
      this.getData()
    }
  },
  async mounted(){
    //东莞，中山placeType传04，其他03
    let placeType = this.$store.state.account.user.deptIds=='4419'||this.$store.state.account.user.deptIds=='4420'?'04':'03'
    this.searchForm.placeType = placeType
    await this.getCascader()
    this.selectChange(this.selectOptions[0].selectValue)
  }
};
</script>

<style lang="scss" scoped>
.patrolTable-root {
  position: relative;
  .select-ul{
    position: absolute;
    top: 0;
    right: 132px;
    z-index: 10;
  }
}
::v-deep .el-cascader{
  line-height: initial;
}
</style>
